<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common/swiper/swiper.min.css"/>
    <style>
        .flex{display: -webkit-box; display: -webkit-flex; display: flex;}
        html,body{
            background-color: transparent;
        }
        #summary-text {
            width: 3.42rem;
            font-size: 0.16rem;
            line-height: 0.22rem;
            color: #231313;
            font-weight: 600;
        }
        .tag-text {
            font-size: 0.14rem;
            line-height: 0.24rem;
            color: #28354C;
        }
        .swiper-slide-recommend{
            width: 1.44rem;
            height: 1.55rem;
            margin-left: 0.14rem;
        }
        .article-image {
            width: 1.44rem;
            height: 0.96rem;
            background-size: 1.44rem 0.96rem;
        }
        .article-text {
            margin-top: 0.08rem;
            font-size: 0.12rem;
            line-height: 0.17rem;
            color: #231313;
            white-space:wrap;
            text-overflow:ellipsis;
            overflow:hidden;
            display: -webkit-box;
             -webkit-box-orient: vertical;
            word-break:break-all;
             -webkit-line-clamp: 2; /* 控制显示的行数 */
        }
        .video-image-cover {
            position: absolute;
            width: 1.44rem;
            height: 0.96rem;
            background-color: rgba(0, 0, 0, 0.30);
            justify-content: center;
            align-items: center;
        }
        .play-icon {
            width: 0.24rem;
            height: 0.24rem;
            background-size: 0.24rem 0.24rem;
            background-image: url(../../image/course/play-icon.png);
        }
        .not-active {
            display: none;
        }
    </style>
</head>
<body>
    <div style="background-color: white">
        <div style="width: 100%; height: 0.20rem"></div>
        <div class="flex" style="width: 100%; justify-content: center">
            <p id="summary-text"></p>
        </div>
        <div class="flex" style="width: 100%; margin-top: 0.12rem; justify-content: center;">
            <div id="content-html" style="width: 3.42rem"></div>
        </div>
        <div style="width: 100%; height: 0.20rem"></div>
    </div>
    <div style="width: 100%; height: 2.02rem; margin-top: 0.08rem; background-color: white;">
        <div style="width: 100%; height: 0.12rem"></div>
        <p class="tag-text" style="margin: 0 0 0.12rem 0.16rem">相关视频</p>
        <div class="swiper-container" id="recommend-swiper-container" style="width: 100%; height: 1.55rem;">
            <div class="swiper-wrapper" id="recommend-swiper-wrapper"></div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common/common.js"></script>
<script type="text/javascript" src="../../script/common/swiper/swiper.min.js"></script>
<script type="text/javascript">
    var summaryTextEl, contentHtmlEl;
    var recommendSwiper;
    var videoInfo, recommend;
    apiready = function () {
        summaryTextEl = $api.byId('summary-text');
        contentHtmlEl = $api.byId('content-html');

        getVideoInfo();
    }

    function getVideoInfo() {
        api.ajax({
            url: apiUrl + '/article/video-detail',
            tag: '/article/video-detail',
            method: 'get',
            data: {
                values: {
                    token: $api.getStorage("token"),
                    video_id: api.pageParam.video_id,
                }
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.code == 0) {
                    videoInfo = ret.data;

                    var jsfun = 'playVideo(' + videoInfo["video_url"] + ", " + videoInfo["thumb"] + ');';
                    api.execScript({
                        script: jsfun
                    });

                    $api.text(summaryTextEl, videoInfo['summary']);

                    $api.append(contentHtmlEl, videoInfo['content']);

                    recommend = videoInfo['recommend'];
                    getRecommend()
                } else {
                    api.toast({
                        msg: ret.err_msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }
            } else {
                // api.alert({ msg: JSON.stringify(err) });
            }
        });
    }

    function getRecommend() {
        var recommendSwiperWrapper = $api.byId('recommend-swiper-wrapper');

        for (var i=0,len=recommend.length; i<len; i++)
        {
            $api.append(recommendSwiperWrapper,'<div id=' + "a-" + recommend[i]["video_id"] + ' class="swiper-slide swiper-slide-recommend" style="position: relative" tapmode onclick="openVideoInfoWin(this)">' +
                '<div class="flex video-image-cover">' +
                '<div class="play-icon"></div>' +
                '</div>' +
                '<div class="article-image" style="background-image: url('+ recommend[i]["thumb"] + ');"></div>' +
                    '<p class="article-text">'+ recommend[i]["summary"] + '</p>' +
                '</div>');
        }
        recommendSwiper = new Swiper ('#recommend-swiper-container', {
            freeMode : true,
            slidesPerView : "auto",
        });
    }

    function share() {
        var sharedModule = api.require('shareAction');
        sharedModule.shareText({
            text: videoInfo['share_link']
        });
    }

    function openVideoInfoWin(el) {
        var id, videoId;
        id = $api.attr(el,'id');
        videoId = id.substring(2);
        api.openWin({
            name: 'videoWin' + i++,
            url: './videoWin.html',
            slidBackType: 'edge',
            pageParam: {
                video_id: videoId,
            },
            animation: {
                type:"movein",
                subType:"from_right",
                duration:300
            }
        });
    }
</script>
